<template>
    <!-- 商品展示栏 -->
    <div class="goodsCard">
        <img :src="coverImages" alt="" class="goods">
        <p class="goodName">{{title}}</p>
        <img src="@/assets/images/stLine-coin-l.svg" alt="" class="dollar">
        <span class="price">{{priceDay+'/日 '+priceMonth*20+'/月'}}</span>
    </div> 
</template>
    
<script setup>
    import {defineProps} from 'vue'
    defineProps({
        priceDay:{
            default:100
        },
        priceMonth:{
            default:2000
        },
        coverImages:{
            
        },
        title:{
            default:'默认标题'
        }
    })

</script>
    
<style lang="scss" scoped>
    /* 商品详情 */
    .goodsCard{
        position: relative;
        width:1.70rem;
        height: 2.40rem;
        border-radius: 20px;
        background-color: #ffffff;
        

            img.goods{
                position: absolute;
                top:0.14rem;
                left:0.1rem;
                width:1.5rem;
                height: 1.58rem;
                border-radius: 20px;
            }
            p.goodName{
                position: absolute;
                top:1.84rem;
                left:0.11rem;
                font-size: 0.16rem;
                width: 1rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            img.dollar{
                position: absolute;
                top:2.12rem;
                left:0.11rem;
                width: 0.15rem;
                height: 0.15rem;
            }

            .price{
                position: absolute;
                top:2.09rem;
                left:0.3rem;
                display:inline-block;
                color: rgba(233, 157, 66, 1);
                font-size: 0.14rem;
                font-weight: bold;
            }
} 
    
    
</style>